<template>
	<view class="my">
		<!-- 用户信息 -->
		<view class="login" >
			<view class="login-left">
				<view class="title">{{nickname}}</view>
				<view>立即绑定&gt;</view>
			</view>
			<view class="login-right">
				<image :src="avatar" mode=""></image>
			</view>
		</view>
		<!-- 设置 -->
		<view class="set">
			<view class="set-item">
				<view>最近阅读</view>
				<view>&gt;</view>
			</view>
			<view class="set-item">
				<view>帮助中心</view>
				<view>&gt;</view>
			</view>
			<view class="set-item" >
				<view>关于我们</view>
				<view>&gt;</view>
			</view>
			<view class="set-item" >
				<view>设置</view>
				<view>&gt;</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
import {ref } from 'vue'
const avatar = ref<string>('/static/avatar/role_14.png')
const nickname = ref<string>('小小菜瓜')
</script>
<style scoped  lang="scss">
.my{
	.login{
		display: flex;
		justify-content: space-between;
		padding: 157rpx 36rpx 80rpx;
		.login-left{
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #BEBEBE;
			line-height: 60rpx;
			.title{
				font-size: 46rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #000000;
			}
		}
		.login-right{
			image{
				width: 130rpx;
				height: 130rpx;
				border: 1px solid #fff;
				border-radius: 50%;
			}
		}
	}
	.set{
		.set-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			width: 680rpx;
			height: 100rpx;
			border-bottom: 1px solid #F4F4F4;
			view{
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
			}
		}
	}
}
</style>
